<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/findPassword.css">
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="left">
            <a href="">
                <img src="../images/topLogo.png" alt="">
            </a>
            <span>
                找回密码
            </span>
        </div>
        <div class="right">
            已有账号，去 <a href="">登录>></a>
        </div>
    </div>
</div>
<div class="findPassword">
    <div class="container">
        <div class="rankTopic">
            <span>找回密码</span>
        </div>
        <div class="step1">
            <form action="">
                <div class="stepInput">
                    <span>
                        手机号：
                    </span>
                    <input type="text" placeholder="输入您的手机号码" id="userTelPhone">
                    <!--<p  id="errorTips" class="errorTips animated shake">手机格式错误</p>-->
                </div>
                <p class="stepTips">请填写您需要找回的账号手机号码</p>
                <div class="stepCode">
                      <span>
                        验证码：
                    </span>
                    <input type="text" placeholder="请输入验证码" id="userMsgCode">
                    <input type="button" id="getCode" value="获取短信验证码">
                </div>
                <div class="commitStep">
                    <input type="button" value="下一步" id="nextstep1" disabled>
                </div>
            </form>
        </div>
        <div class="step2" >
            <form action="">
                <p>输入您的新密码</p>
                <div class="stepInput">
                    <span>
                        新密码：
                    </span>
                    <input type="text" placeholder="设置新密码" id="setPassword">
                </div>
                <div class="stepInput">
                      <span>
                        确认密码：
                    </span>
                    <input type="text" placeholder="确认新密码" id="confirmPassword">
                </div>
                <div class="commitStep">
                    <input type="button" value="下一步" id="nextstep2" disabled>
                </div>
            </form>
        </div>
        <div class="step3">
            <img src="../images/successIcon.png" alt="">
            <p>
                修改密码成功，点击这里 <a href="login.html">重新登录</a>
            </p>
        </div>
    </div>
</div>
<div class="footer">
    <p >
        Copyright：2018 链百科 鄂ICP证030173号
    </p>
    <p>
        武汉市代劳科技有限责任公司-链百科团队出品
    </p>
</div>
<script src="../layer/layer.js"></script>
<script>
    var timer =null
    var count =60
    function checkTel(){
        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if( !reg2.test($('#userTelPhone').val()) ){
            this.telError =true
            return false;
        }
        return true
    }
    //倒计时
    function startCount(){
        var that =this
        timer =setInterval(function (res) {
            count --
            $('#getCode').val(count+'s后重发')
            if(count==0){
                $('#getCode').val('获取验证码')
                clearInterval(timer)
                $('#getCode').attr('disabled',false)
                that.count =59
            }
        },1000)
    }
    //获取验证码
    $('#getCode').on('click',function (e) {
        if(!$('#userTelPhone').val()){
            layer.tips('请输入手机号码', '#userTelPhone', {
                tips: 2
            });
            return false
        }
        if(checkTel()){
            var that =this
            $('#getCode').val('59s后重发')
            startCount()
            $('#getCode').attr('disabled','disabled')
        }else{
            layer.tips('手机号码格式错误', '#userTelPhone', {
                tips: 2
            });
        }
    })
    $('#userMsgCode').on('keyup',function (e) {
        if(e.keyCode==8){
            if(!$('#userMsgCode').val()){
                $('#nextstep1').removeClass('active')
                $('#nextstep1').attr('disabled','disabled')
            }
        }
        if((e.keyCode>=65 &&e.keyCode<=90)||(e.keyCode>=49&&e.keyCode<=57)||(e.keyCode>=96&&e.keyCode<=105)){
            $('#nextstep1').addClass('active')
            $('#nextstep1').attr('disabled',false)
        }
    })
    //注册验证  下一步
    $('#nextstep1').on('click',function () {
        if($('#userTelPhone').val()&&$('#userMsgCode').val()&&checkTel($('#userTelPhone').val())){
            //数据提交
             if($('#userMsgCode').val()!='1234'){
                 layer.tips('验证码错误', '#userMsgCode', {
                    tips: 3
                });
             }else{
                 $('.step2').show()
                 $('.step1').hide()

             }
        }else{
            layer.tips('手机号码格式错误', '#userTelPhone', {
                tips: 2
            });
        }
    });
    //重置密码部分
    $('#confirmPassword').on('keyup',function (e) {
        if($('#setPassword').val()&&$('#confirmPassword').val()){
            $('#nextstep2').addClass('active')
            $('#nextstep2').attr('disabled',false)
        }
    });
    //确认修改密码部分
    $('#nextstep2').on('click',function () {
        if($('#setPassword').val()&&$('#confirmPassword').val()&&$('#setPassword').val()==$('#confirmPassword').val()){
            //密码提交
            console.log('ok')
            $('.step3').show()
            $('.step2').hide()
        }else{
            layer.msg('两次输入的密码不一致');
        }
    });
</script>
</body>
</html>